<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
	<title>01-recordList</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
  <style>
    label[class="error"]{
      color:#f00;
    }
  </style>
</head>
<body>
	<div class="container-fluid">
	  <br>
		<h3>寻找失物</h3>
		<hr>
		<!-- 展示记录 -->
		<div class="">
		  <table id="dg" style="width:100%;height:460px;">
		  </table>
		</div>
    <!-- 添加,编辑,移除按钮 -->
    <div id="toolbar">
      <table>
        <tr>
          <!-- 隐藏此功能，管理员不需要此功能。添加爱心社部门这个特殊用户，凡是要发布寻找信息，都用爱心社这个用户登陆来发布，2019/03/03 -->
          <!-- 用户发布的寻找记录，照片的命名是"uid_imageName"。如果管理员也能发布寻找信息，也需要传递rid过去，照片的命名为"rid_imageName"。因为隐藏此功能了，故没有修改 -->
          <!-- <td><a href="javascript:void(0)" class="easyui-linkbutton newRecordCls" data-options="iconCls:'icon-add',plain:true" onclick="newRecord()">添加</a></td> -->
          <td><a href="javascript:void(0)" class="easyui-linkbutton detailRecordCls" data-options="iconCls:'icon-edit',plain:true" onclick="detailRecord()">详情</a></td>
          <td><a href="javascript:void(0)" class="easyui-linkbutton removeRecordCls" data-options="iconCls:'icon-remove',plain:true" onclick="destroyRecord()">移除</a></td>
          <td>
				    <div class="searchHeader">
				      <form class="form-inline">
				        <label class="my-1 mr-2" for="forCategoryToPage">物品类别</label>
				        <!-- 物品类别展示 -->
				        <select class="custom-select my-1 mr-lg-5" id="forCategoryToPage"></select>
				      </form>
				    </div>
          </td>
        </tr>
      </table>
    </div>
	</div><!-- container-fluid -->

  <!-- Modal : addSearchLose -->
  <div class="modal fade" id="addSearchLose" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="width:600px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详情</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <!-- enctype="multipart/form-data" 多功能表单  ==> 可以上传文件 -->
				    <form method="post" enctype="multipart/form-data" id="addSearchLoseForm">
				      <div class="form-group row">
				        <label class="col-sm-1"></label>
				        <label for="forAddTitle" class="col-sm-2 col-form-label text-center">标题</label>
				        <div class="col-sm-6">
				          <input type="text" id="forAddTitle" name="forAddTitle" class="form-control" maxLength="15">
				        </div>
				      </div>
				      <div class="form-group row">
				        <label class="col-sm-1"></label>
				        <label for="forCategoryList" class="col-sm-2 col-form-label text-center">失物类别</label>
				        <div class="col-sm-6">
				          <select class="custom-select forAddCategory" id="forCategoryList" name="forAddCategory">
				            <!-- 必须有一个value为空的option， -->
				            <option value=''>请选择分类...</option>
				          </select>
				        </div>
				      </div>
				      <div class="form-group row">
				        <label class="col-sm-1"></label>
				        <label for="forAddDetail" class="col-sm-2 col-form-label text-center">细节</label>
				        <div class="col-sm-6">
				          <textarea id="forAddDetail" class="form-control" name="forAddDetail" rows="4"></textarea>
				        </div>
				      </div>
	            <div class="form-group row">
	              <label class="col-sm-1"></label>
	              <label for="forAddPhone" class="col-sm-2 col-form-label text-center">联系电话</label>
	              <div class="col-sm-6">
	                <input type="text" id="forAddPhone" class="form-control" name="forAddPhone">
	              </div>
	            </div>
				      <!-- 选择图片。    accept="image/gif,image/jpeg,image/jpg,image/png" -->
				      <div class="form-group row">
				        <label class="col-sm-1"></label>
				        <label for="" class="col-sm-2 col-form-label text-center">照片</label>
				        <div class="custom-file col-sm-6">
				          <input type="file" accept="image/*" class="custom-file-input" id="forUploadPhoto" name="forUploadPhoto">
				          <label class="custom-file-label showPhotoName">选择照片</label>
				        </div>
				      </div>
				      <!-- 显示图片 -->
				      <div class="form-group row showPhotoDiv" style="display: none;">
				        <label class="col-sm-3"></label>
				        <div class="col-sm-6" style="border: 1px solid #C1C1C1;">
				          <figure class="figure">
				            <span class="badge badge-secondary btn closeImgBtn" style="position:absolute;right:16px;">X</span>
				            <img class="figure-img img-fluid rounded showPhotoImg">
				          </figure>
				        </div>
				      </div>
				    </form>
  		      <br>
				    <div class="form-group row">
				      <label class="col-sm-3"></label>
				      <div class="col-sm-6 text-center">
				        <button type="button" class="btn col-sm-3 btn-outline-primary  mr-lg-5" data-dismiss="modal">取消</button>
				        <button type="button" class="btn col-sm-3 btn-outline-primary confirmSaveSearchLose">添加</button>
				      </div>
				    </div>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->
	
	<!-- Modal : showSearchLose -->
  <div class="modal fade" id="showSearchLose" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="width:600px;">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">详情</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="#" id="showSearchLoseForm">
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forPhoto" class="col-sm-2 col-form-label text-center">照片</label>
			        <div class="col-sm-7">
			          <figure class="figure">
			            <img src="" class="figure-img img-fluid rounded mx-auto d-block" style="width:400px;height:200px;">
			          </figure>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowApplicant" class="col-sm-2 col-form-label text-center">发布者 </label>
			        <div class="col-sm-7">
			          <input type="text" id="forShowApplicant" class="form-control" readonly>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowTitle" class="col-sm-2 col-form-label text-center">标题 </label>
			        <div class="col-sm-7">
			          <input type="text" id="forShowTitle" class="form-control" readonly>
			        </div>
			      </div>
			      <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowCategory" class="col-sm-2 col-form-label text-center">失物类别</label>
              <div class="col-sm-7">
                <input type="text" id="forShowCategory" class="form-control" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-1"></label>
              <label for="forShowIssueTime" class="col-sm-2 col-form-label text-center">发布时间</label>
              <div class="col-sm-7">
                <input type="text" id="forShowIssueTime" class="form-control" readonly>
              </div>
            </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowPhone" class="col-sm-2 col-form-label text-center">联系电话</label>
			        <div class="col-sm-7">
			          <input type="text" id="forShowPhone" class="form-control" readonly>
			        </div>
			      </div>
			      <div class="form-group row">
			        <label class="col-sm-1"></label>
			        <label for="forShowDetail" class="col-sm-2 col-form-label text-center">细节</label>
			        <div class="col-sm-7">
			          <textarea id="forShowDetail" class="form-control" rows="4" readonly></textarea>
			        </div>
			      </div>
			    </form>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->
	
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/categoryAjax.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  <!-- 上传图片，移除图片 -->
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/fileUpload.js"></script>
  <script>
    // 每次点击添加，把添加表单清空
    function closeShowImgFn(){
      $("#forAddTitle").val("");
      $("#forAddDetail").val("");
      $("#forAddPhone").val("");
      $("label.error").remove();
	    closeShowImg();
	  }
    // 点击 添加 ，弹出添加层，做一些初始化操作
    function newRecord(){
    	$(".newRecordCls").attr( 'data-toggle','modal');
      $(".newRecordCls").attr('data-target','#addSearchLose');
      $(".confirmSaveSearchLose").removeAttr('data-dismiss','modal');
      closeShowImgFn();
    }
    // 点击 详情 ，弹出详情层
    function detailRecord(){
    	var row = $('#dg').datagrid('getSelected');
    	if(row){
	      $(".detailRecordCls").attr( 'data-toggle','modal');
	      $(".detailRecordCls").attr('data-target','#showSearchLose');
    		$(".figure-img").attr("src","/LostAndFound/images"+row.image);
    		$("#forShowApplicant").val(row.username);
    		$("#forShowTitle").val(row.title);
    		$("#forShowCategory").val(row.cname);
    		$("#forShowIssueTime").val(row.issuetime);    		
    		$("#forShowPhone").val(row.phone);
    		$("#forShowDetail").val(row.detailinfo);
    	}
    }
    // 在 添加层 下，点击确定发布
    function saveNewRecord(){
    	var formData = new FormData();
    	formData.append("title",$("#forAddTitle").val());
    	formData.append("cid",$("#forCategoryList").val());
    	formData.append("detailInfo",$("#forAddDetail").val());
    	formData.append("phone",$("#forAddPhone").val());
    	// 有图片上传时，才进行
    	if($("#forUploadPhoto")[0].files[0]!=null){
	    	formData.append("file",$("#forUploadPhoto")[0].files[0]);
    	}
    	$(".confirmSaveSearchLose").attr( 'data-dismiss','modal');
      $.ajax({
        url:"/LostAndFound/searchForLose?method=handleAddNewSearchLose",
        type:"post",
        data:formData,
        processData:false,
        contentType:false,
        dataType:"json",
        success:function(result){
        	 if(result.success){
               $("#dg").datagrid("reload");
          }else{
               $.messager.show({
                 title:"Error",
                 msg:"添加错误！"
               })
          } 
        }
      });
    }
    // 移除记录
    function destroyRecord(){
    	var row = $('#dg').datagrid('getSelected');
    	if(row){
    		$.messager.confirm('Confirm','确定删除？',function(r){
    			if(r){
    				$.post(
    						"/LostAndFound/searchForLose?method=handleDeleteSearchLoseRecordForEasyUI",
    						{"aid":row.aid},
    						function(data){
    							if(data.success){
    								$('#dg').datagrid('reload'); // reload the info data in current page
    							}else{
    								$.messager.show({
    									title:"Error",
    									msg:"删除错误！"
    								})
    							}
    						},
    						"json"
    				);
    			}
    		})
    	}
    }
    $(function(){
    	  // js创建table
    	  $("#dg").datagrid({
    		  url:"/LostAndFound/searchForLose?method=recordListForSearchLose",
    		  queryParams:{
    			  cid:$("#forCategoryToPage option:selected").val()
    		  },
    		  columns:[[
    			  {field:'title',title:'标题',width:100},
    			  {field:'username',title:'发布者',width:100},
    			  {field:'cname',title:'物品类型',width:100},
    			  {field:'phone',title:'联系电话',width:100},
    			  {field:'issuetime',title:'发布时间',width:100},
    		  ]],
    		  rownumbers:true,
    		  pagination:true,
    		  singleSelect:true,
    	    method:'post',
    	    fitColumns:true,
    	    toolbar:'#toolbar',
    	    striped:true
    	  });
    	  
    	  // 给select添加点击事件，当option分类变化时，datagrid重新加载
    	  $("#forCategoryToPage").on("change",function(){
    		  $("#dg").datagrid("load",{
    			  cid:$("#forCategoryToPage option:selected").val()
    		  });
    	  });
    	  // validate验证
    	  jQuery.validator.setDefaults({
    		  success:"valid"
    	  });
    	  
    	  // 验证规则
    	  $("#addSearchLoseForm").validate({
    		  rules:{
    			  forAddTitle:{
    				  required:true,
    		      maxlength:15
    			  },
    			  forAddCategory:{
    				  required:true
    			  }, 
    			  forAddDetail:{
    				  required:true
    			  },
    			  forAddPhone:{
    				  required:true    				  
    			  }
    		  }
    	  })
    	  
    	  // 确定添加
    	  $(".confirmSaveSearchLose").on("click",function(){
    		  if($("#addSearchLoseForm").valid()){
    			  saveNewRecord();
    		  }
    	  });
    	  
    	  
    	});// end of $(function{})
  </script>
</body>
</html>